<!-- 详情 -->
<template>
    <el-drawer :model-value="isDetailsShow" size="800px" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
        <template #header>
            <h4 style="font-weight: bold;">详情</h4>
        </template>
        <el-form ref="formRef" :model="form" label-width="130">
            <el-form-item label="姓名" prop="username">
                <el-input clearable v-model="form.username" disabled placeholder="请输入用户姓名" />
                <!-- <span>{{ form.username }}</span> -->
            </el-form-item>

            <el-form-item label="企业名称" prop="companyId">
                <el-select filterable clearable v-model="form.companyId" disabled>
                    <el-option v-for="item in companyNameList" :label="item.name" :value="item.id" :key="item.id" />
                </el-select>
                <!-- <span>{{ form.companyName }}</span> -->
            </el-form-item>

            <el-form-item label="手机号" prop="phone">
                <el-input clearable v-model="form.phone" disabled placeholder="请输入手机号" />
                <!-- <span>{{ form.phone }}</span> -->
            </el-form-item>

            <el-form-item label="角色" prop="role">
                <el-select clearable v-model="form.role" disabled>
                    <el-option v-for="item in roleList" :label="item.name" :value="item.id" :key="item.id" />
                </el-select>
                <!-- <span>{{ form.roleName }}</span> -->
            </el-form-item>

            <!-- 角色选择兽医，动态添加：身份证，获得执业资质时间 -->
            <template v-if="form.role == 7">
                <el-form-item label="身份证号" prop="idcard">
                    <el-input clearable v-model="form.idcard" disabled placeholder="请输入身份证号" />
                    <!-- <span>{{ form.idcard }}</span> -->
                </el-form-item>
                <el-form-item label="获得执业资质时间" prop="practiceTime" style="width:100%">
                    <el-date-picker disabled v-model="form.practiceTime" value-format="YYYY-MM-DD" type="date" placeholder="请选择获得执业资质时间" style="width:100%" />
                    <!-- <span>{{ form.practiceTime }}</span> -->
                </el-form-item>
            </template>

            <!-- 角色选择性能测定员，动态添加：身份证，培训时间 -->
            <template v-if="form.role == 8">
                <el-form-item label="身份证号" prop="idcard">
                    <el-input clearable v-model="form.idcard" disabled placeholder="请输入身份证号" />
                    <!-- <span>{{ form.idcard }}</span> -->
                </el-form-item>
                <el-form-item label="培训时间" prop="trainingTime" style="width:100%">
                    <el-date-picker disabled v-model="form.trainingTime" value-format="YYYY-MM-DD" type="date" placeholder="请选择培训时间" style="width:100%" />
                    <!-- <span>{{ form.trainingTime }}</span> -->
                </el-form-item>
            </template>

            <el-form-item label="是否启用" prop="enable">
                <el-switch v-model="form.enable" disabled />
                <!-- <span v-if="form.enable">是</span>
                <span v-else>否</span> -->
            </el-form-item>

            <el-form-item label="用户头像" prop="avatar">
                <el-upload
                    class="avatar-uploader"
                    action="/api/upload/avatar"
                    :show-file-list="false"
                    :auto-upload="false"
                    :on-change="onChange"
                    disabled
                >
                    <img v-if="form.avatar" :src="form.avatar" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeEditShow">关闭</el-button>
                <!-- <el-button type="primary" @click="confirmEdit">确认</el-button> -->
            </span>
        </template>
    </el-drawer>
</template>

<script setup>
import { ref, reactive, onMounted, onUpdated } from 'vue'
import { reqGetCompanyNameList } from '@/api/company'
import { reqGetUserInfo, reqGetRoleList, reqUserUpdate, reqUploadImage } from '@/api/user'
import { ElMessage } from 'element-plus'

let props = defineProps(['isDetailsShow', 'userDetailsId']) // 接收父组件传递过来的数据

let $emit = defineEmits(['closeIsDetailsShow']) // 自定义事件，关闭弹窗

// 表单收集
const form = reactive({
    username: '', // 姓名
    companyName: '', // 企业名称
    companyId: '', // 企业id
    phone: '', // 手机号码
    role: '', // 角色
    enable: true, // 是否启用
    avatar: '', // 用户头像
    idcard: '', // 身份证号
    practiceTime: '', // 获得执业资质时间
    trainingTime: '' // 培训时间
})

// 通过id，获取用户详情
const getUserInfo = async () => {
    let res = await reqGetUserInfo({ id: props.userDetailsId })
    Object.assign(form, res.data)
    form.role = parseInt(form.role)
}

// 获取企业下拉列表数据
let companyNameList = ref([])
const getCompanyNameList = async () => {
    let res = await reqGetCompanyNameList()
    companyNameList.value = res.data
}

// 获取角色列表
let roleList = ref([])
const getRoleList = async () => {
    let res = await reqGetRoleList()
    roleList.value = res.data
}

// 关闭按钮
const closeEditShow = () => {
    $emit('closeIsDetailsShow', false)
    // 清空表单
    formRef.value.resetFields()
}

// 确认按钮，保存编辑
const formRef = ref()
const confirmEdit = async () => {
    let res = await reqUserUpdate(form)
    if(res.status == 200){
        ElMessage({
            type: 'success',
            message: '编辑成功'
        })
        $emit('closeIsDetailsShow', false)
        formRef.value.resetFields()
    }else{
        ElMessage({
            type: 'warning',
            message: res.msg
        })
    }
}

// 上传头像
const onChange = (data) => {
    const file = data.raw
    const fd = new FormData()
    fd.append('file', file)
    reqUploadImage(fd).then((res) => {
        if(res.status == 200){
            form.avatar = res.data
        }
    })
}

// 组件挂载完毕
onMounted(() => {
    getCompanyNameList()
    getRoleList()
})

// 组件更新完毕
onUpdated(() => {
    getUserInfo()
})
</script>

<style scoped lang="scss">
// 头像样式
.avatar-uploader{
    border: 1px dashed #dedede;
    border-radius: 5px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>